<template>
  <div>
    <t-drawer
      size="695px"
      :visible.sync="visible"
      :confirmOnEnter="true"
      :onClose="close"
      @confirm="handleConfirm"
      class="client-info"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px"/>
          </p>
          <h3>{{ header }}</h3>
        </div>
      </template>

      <t-form :data="formData" :rules="rules" ref="form" label-align="top" @submit="onSubmit">
        <t-form-item label="名称" name="name">
          <t-input v-model="formData.name" placeholder="请输入名称"></t-input>
        </t-form-item>
        <t-form-item label="联系人" name="linkman">
          <t-input v-model="formData.linkman" placeholder="请输入联系人"></t-input>
        </t-form-item>
        <t-form-item label="联系电话" name="phone">
          <t-input v-model="formData.phone" placeholder="请输入联系电话"></t-input>
        </t-form-item>
        <t-form-item label="区域" name="linkman">
          <t-cascader v-model="districtValue" :input-props="districtInputProps" :options="provinceOptions" value-type="full" :load="load" @change="handleChange""></t-cascader>
        </t-form-item>
        <t-form-item label="详细地址" name="address">
          <t-input v-model="formData.address" placeholder="请输入详细地址"></t-input>
        </t-form-item>
        <t-form-item label="企业微信二维码" name="qrcode">
          <upload-img module="agent" :value="formData.qrcode ? [{url: formData.qrcode}] : []" @success="handleSuccess($event, 'qrcode')" @remove="handleRemove($event, 'qrcode')"></upload-img>
        </t-form-item>
        <t-form-item label="身份证图片" name="qrcode">
          <upload-img module="agent" :value="formData.identity_card_data" @success="handleSuccess($event, 'qrcode')" @remove="handleRemove($event, 'qrcode')"></upload-img>
        </t-form-item>
        <t-form-item label="学生证图片" name="qrcode">
          <upload-img module="agent" :value="formData.student_card_data" @success="handleSuccess($event, 'qrcode')" @remove="handleRemove($event, 'qrcode')"></upload-img>
        </t-form-item>
        <t-form-item label="资产证明图片" name="qrcode">
          <upload-img module="agent" :value="formData.asset_certificate_data" @success="handleSuccess($event, 'qrcode')" @remove="handleRemove($event, 'qrcode')"></upload-img>
        </t-form-item>
        <t-form-item label="征信报告图片" name="qrcode">
          <upload-img module="agent" :value="formData.credit_report_data" @success="handleSuccess($event, 'qrcode')" @remove="handleRemove($event, 'qrcode')"></upload-img>
        </t-form-item>
        <t-form-item label="是否社团成员" name="is_club_card">
          <t-switch v-model="formData.is_club_card" :custom-value="[1, 0]" :label="['开启', '关闭']"></t-switch>
        </t-form-item>
        <t-form-item v-if="formData.is_club_card" label="社团图片" name="qrcode">
          <upload-img module="agent" :value="formData.club_card_data" @success="handleSuccess($event, 'qrcode')" @remove="handleRemove($event, 'qrcode')"></upload-img>
        </t-form-item>
      </t-form>
    </t-drawer>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";
import UploadImg from "@/components/upload-img/index.vue";
import {agentDetailsApi, agentEditApi} from "@/api/agent";
import provinceData from "@/config/city-data/province";
import cityData from "@/config/city-data/city";
import areaData from "@/config/city-data/area";

export default {
  name: 'EditInfo',
  components: {IconFont, UploadImg},
  data() {
    return {
      header: '编辑',
      visible: false,
      editId: '', // 编辑id
      // 区域选中选项
      districtValue: '',
      districtInputProps: {
        value: '',
      },
      formData: {
        name: '', // string 名称，可不传 可选
        linkman: '', // string 联系人，可不传 可选
        phone: '', // string 联系电话，可不传 可选
        //id_card_no: '', // string 身份证号，可不传 可选
        province: '', // string 省，... 可选
        provinceCode: '', // string 省编号 可选
        city: '', // string 市 可选
        cityCode: '', // string 可选
        area: '', // string 区 可选
        areaCode: '', // string 可选
        address: '', // string 详细地址 可选
        //longitude: '', // number 坐标 可选
        //latitude: '', // number 坐标 可选
        qrcode: '', // string 可选 二维码图片，调用文件上传（file_module=agent）
        identity_card_data: [], // string 可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        student_card_data: [], // string 可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        asset_certificate_data: [], // string 可选 资产证明图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        credit_report_data: [], // string 可选 征信报告图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        is_club_card: 0, // integer 可选 是否社团成员，1是；0否
        club_card_data: [], // string 可选 社团图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
      },
      rules: {
        //icon: [{required: true, message: '请上传图标', trigger: 'change'},],
        //title: [{required: true, message: '请输入分类名称', trigger: 'blur'},],
        //sort: [{required: true, message: '请输入排序', trigger: 'blur'},],
        //status: [{required: true, message: '请选择状态', trigger: 'change'},],
      },

      provinceOptions: [],  // 省份
      cityOptions: [],  // 省份
      areaOptions: [],  // 省份
    }
  },
  methods: {
    load(node) {
      return new Promise((resolve) => {
        const {data} = node;
        const {fType, id, children} = data
        let nodes = []
        if (fType === 'province') {
          const cityOptions = this.cityOptions.filter(item=> item.provinceCode === data.value).map(item=> ({...item, provinceData: data}))
          nodes = cityOptions
        } else if (fType === 'city') {
          const areaOptions = this.areaOptions.filter(item=> item.cityCode === data.value).map(item=> ({...item, provinceData: data.provinceData, cityData: data}))
          nodes = areaOptions
        }
        resolve(nodes);
      })
    },
    handleChange(value, context) {
      this.districtValue = value
      this.districtInputProps = {
        value: `${context.node.data.provinceData.label} / ${context.node.data.cityData.label} / ${context.node.data.label}`,
      }
      this.formData.province = context.node.data.provinceData.label
      this.formData.city = context.node.data.cityData.label
      this.formData.area = context.node.data.label

      this.formData.provinceCode = value[0]
      this.formData.cityCode = value[1]
      this.formData.areaCode = value[2]
    },
    // 上传图片
    handleSuccess(files, key) {
      this.formData[key] = files.response.url
    },
    // 删除图片
    handleRemove(files, key) {
      this.formData[key] = ''
    },
    // 确认
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.handleSubmit()
      } else {
        this.$message.warning(firstError);
      }
    },
    handleSubmit() {
      const params = {...this.formData}
      params.identity_card_data = params.identity_card_data.map(item=> item.url).join(',')
      params.student_card_data = params.student_card_data.map(item=> item.url).join(',')
      params.asset_certificate_data = params.asset_certificate_data.map(item=> item.url).join(',')
      params.credit_report_data = params.credit_report_data.map(item=> item.url).join(',')
      params.club_card_data = params.club_card_data.map(item=> item.url).join(',')

      //console.log('params', params)
      //return
      agentEditApi(this.editId, params).then(res=> {
        this.$message.success('编辑成功');
        this.$emit('refresh');
        this.close();
      }).catch(err=> {
        console.log(err)
      })
    },
    // 获取详情
    getDetail() {
      agentDetailsApi(this.editId).then(res=> {
        this.districtValue = [res.data.provinceCode, res.data.cityCode, res.data.areaCode]
        this.districtInputProps = {
          value: `${res.data.province} / ${res.data.city} / ${res.data.area}`,
        }
        this.formData = {
          name: res.data.name, // string 名称，可不传 可选
          linkman: res.data.linkman, // string 联系人，可不传 可选
          phone: res.data.phone, // string 联系电话，可不传 可选
          //id_card_no: '', // string 身份证号，可不传 可选
          province: res.data.province, // string 省，... 可选
          provinceCode: res.data.provinceCode, // string 省编号 可选
          city: res.data.city, // string 市 可选
          cityCode: res.data.cityCode, // string 可选
          area: res.data.area, // string 区 可选
          areaCode: res.data.areaCode, // string 可选
          address: res.data.address, // string 详细地址 可选
          //longitude: '', // number 坐标 可选
          //latitude: '', // number 坐标 可选
          qrcode: res.data.qrcode, // string 可选 二维码图片，调用文件上传（file_module=agent）
          identity_card_data:  res.data.identity_card_data ? res.data.identity_card_data.split(',').map(item=> ({url: item})) : [], // string 可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
          student_card_data:  res.data.student_card_data ? res.data.student_card_data.split(',').map(item=> ({url: item})) : [], // string 可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
          asset_certificate_data:  res.data.asset_certificate_data ? res.data.asset_certificate_data.split(',').map(item=> ({url: item})) : [], // string 可选 资产证明图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
          credit_report_data:  res.data.credit_report_data ? res.data.credit_report_data.split(',').map(item=> ({url: item})) : [], // string 可选 征信报告图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
          is_club_card: res.data.is_club_card, // integer 可选 是否社团成员，1是；0否
          club_card_data:  res.data.club_card_data ? res.data.club_card_data.split(',').map(item=> ({url: item})) : [], // string 可选 社团图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        }
      }).catch(err=> {
        console.log('err', err)
      })
    },
    open(id) {
      this.editId = id
      this.visible = true
      this.provinceOptions = provinceData.map(item=> ({label: item.name, value: `${item.code}0000`, fType: 'province', children: true}))
      this.cityOptions = cityData.map(item=> ({label: item.name, value: `${item.code}00`, provinceCode: `${item.provinceCode}0000`, fType: 'city', children: true}))  // 省份
      this.areaOptions = areaData.map(item=> ({label: item.name, value: `${item.code}`, cityCode: `${item.cityCode}00`, provinceCode: `${item.provinceCode}0000`, fType: 'city', children: false}))  // 省份

      this.formData = {
        name: '', // string 名称，可不传 可选
        linkman: '', // string 联系人，可不传 可选
        phone: '', // string 联系电话，可不传 可选
        //id_card_no: '', // string 身份证号，可不传 可选
        province: '', // string 省，... 可选
        provinceCode: '', // string 省编号 可选
        city: '', // string 市 可选
        cityCode: '', // string 可选
        area: '', // string 区 可选
        areaCode: '', // string 可选
        address: '', // string 详细地址 可选
        //longitude: '', // number 坐标 可选
        //latitude: '', // number 坐标 可选
        qrcode: '', // string 可选 二维码图片，调用文件上传（file_module=agent）
        identity_card_data: [], // string 可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        student_card_data: [], // string 可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        asset_certificate_data: [], // string 可选 资产证明图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        credit_report_data: [], // string 可选 征信报告图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
        is_club_card: 0, // integer 可选 是否社团成员，1是；0否
        club_card_data: [], // string 可选 社团图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
      }
      this.getDetail()
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

</style>
